<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ deviceId || type != 2 ? '修改' : '新增' }}消防栓</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>设备名称：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-input type="text" placeholder="请输入设备名称" v-model.trim="deviceName" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line img_line">
          <span class="lab"><i class="mark_icon">*</i>在线图标：</span>
          <div style="width: 102px;overflow: hidden" :class="{'error_border':tip_num===2}">
            <el-upload
              :data="param"
              :action="uploadUrl"
              :headers="{token:token,code:code}"
              :show-file-list="false"
              :on-success="onlineSuccess"
              :before-upload="avatarUpload">
              <img v-if="onlineUrl" :src="onlineUrl" class="avatar">
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
          </div>
          <span class="lab second_lab"><i class="mark_icon">*</i>离线图标：</span>
          <div style="width: 102px;overflow: hidden" :class="{'error_border':tip_num===3}">
            <el-upload
              :data="param"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="outlineSuccess"
              :before-upload="avatarUpload">
              <img v-if="outlineUrl" :src="outlineUrl" class="avatar">
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>经度：</span>
          <div :class="{'error_border':tip_num===4}">
            <el-input type="text" placeholder="请输入经度" v-model.trim="lng" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>纬度：</span>
          <div :class="{'error_border':tip_num===5}">
            <el-input type="text" placeholder="请输入纬度" v-model.trim="lat" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>设备地址：</span>
          <div :class="{'error_border':tip_num===6}">
            <el-input type="text" placeholder="请输入设备地址" v-model.trim="address" @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>状态：</span>
          <div>
            <el-radio-group v-model="enable">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {restUrl} from "../../../../url";
import {addHydrant, getHydrantDetail, updateHydrant} from "../../../api/hydrant";
import {getToken} from "../../../utils/auth";
import {getServerCode} from "../../../utils/code";

export default {
  props: ['deviceId', 'type'],
  data() {
    return {
      param: {folder: 'web/hydrant'},
      uploadUrl: restUrl + '/common/upload',
      token: getToken(),
      code:getServerCode('/apiv1/basic'),
      deviceName: '',
      onlineUrl: '',
      outlineUrl: '',
      lng: '',
      lat: '',
      address: '',
      enable: 1,
      infoTip: '',
      tip_num: '',
      loading: false
    }
  },
  mounted() {
    if (this.deviceId) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.loading = true;
      getHydrantDetail(this.deviceId).then(res => {
        if (res.success) {
          this.setData(res.data)
        }
        this.loading = false;
      }, (err) => {
        this.loading = false;
      });
    }
    ,

    // 上传图标
    avatarUpload(file) {
      this.setTip('', '');
      this.loading = true;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传图像大小不能超过 10MB!');
      }
      return isLt10M;
    },

    onlineSuccess(res, file) {
      if (file.response.success) {
        this.onlineUrl = file.response.data;
        this.$message.success('上传成功！');
      } else {
        this.$message.error('上传失败，请重试');
      }
      this.loading = false;
    },

    outlineSuccess(res, file) {
      if (file.response.success) {
        this.outlineUrl = file.response.data;
        this.$message.success('上传成功！');
      } else {
        this.$message.error('上传失败，请重试');
      }
      this.loading = false;
    },

    setData(obj) {
      this.deviceName = obj.name;
      this.outlineUrl = obj.offlineIcon;
      this.onlineUrl = obj.onlineIcon;
      this.enable = obj.enable ? obj.enable : 0;
      this.lng = obj.lng ? obj.lng : '';
      this.lat = obj.lat ? obj.lat : '';
      this.address = obj.address ? obj.address : '';
    },

    // 确认编辑
    confirmEdit() {
      if (this.deviceName === '') {
        this.setTip(1, '请输入设备名称！');
      } else if (this.onlineUrl === '') {
        this.setTip(2, '请上传在线图标！');
      } else if (this.outlineUrl === '') {
        this.setTip(3, '请上传离线图标！');
      } else if (this.lng === '') {
        this.setTip(4, '请输入经度！');
      } else if (this.lat === '') {
        this.setTip(5, '请输入纬度！');
      } else if (this.address === '') {
        this.setTip(6, '请输入设备安装地址！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let data = {
        enable: that.enable,
        onlineIcon: that.onlineUrl,
        offlineIcon: that.outlineUrl,
        name: that.deviceName,
        lat: that.lat,
        lng: that.lng,
        address: that.address,
      }
      if (that.deviceId && that.type == 1) {
        data.id = that.deviceId;
      }
      if (!that.deviceId || that.type == 2) {
        addHydrant(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        updateHydrant(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish) {
      if (finish) {
        this.closePopup(true);
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    setTip(num, text) {
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.img_line .second_lab {
  width: 120px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #60BAE7;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #DCDFE6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #DCDFE6;
  border-radius: 6px;
}

.error_border .avatar-uploader-icon {
  border: 1px solid #e40000;
}

.avatar {
  max-width: 210px;
  min-width: 60px;
  height: 100px;
  display: block;
  border-radius: 6px;
  margin-right: 15px;
  border: 1px solid #bbb;
}
</style>
